<template>
  <div class="page">
    <!-- 左侧菜单栏 -->
    <div class="sidebar">
      <div class="logo">
        <img src="https://kk.nsi-soft.com/group1/M07/02/6D/CkYZh2Qz1RCAPLJ8AAAmvMes0JA324.PNG" alt="logo">
      </div>
      <div class="menu">
        <el-menu default-active="1" @select="handleMenuSelect">
          <el-submenu index="1" v-model="menu1">
            <template #title>
              <i class="el-icon-s-home"></i>
              <span>仪表盘</span>
            </template>
            <el-menu-item index="1-1">控制台</el-menu-item>
            <el-menu-item index="1-2">分析页</el-menu-item>
          </el-submenu>
          <el-submenu index="2" v-model="menu2">
            <template #title>
              <i class="el-icon-setting"></i>
              <span>常用设置</span>
            </template>
            <el-menu-item index="2-1">教师管理</el-menu-item>
            <el-menu-item index="2-2">学生管理</el-menu-item>
            <el-menu-item index="2-3">公告管理</el-menu-item>
            <el-menu-item index="2-4">系统配置</el-menu-item>
            <el-menu-item index="2-5">判题服务器</el-menu-item>
          </el-submenu>
          <el-submenu index="3" v-model="menu3">
            <template #title>
              <i class="el-icon-question"></i>
              <span>问题</span>
            </template>
            <el-menu-item index="3-1">问题列表</el-menu-item>
            <el-menu-item index="3-2">增加题目</el-menu-item>
            <el-menu-item index="3-3">导入导出题目</el-menu-item>
          </el-submenu>
          <el-submenu index="4" v-model="menu4">
            <template #title>
              <i class="el-icon-s-promotion"></i>
              <span>比赛&练习</span>
            </template>
            <el-menu-item index="4-1">比赛列表</el-menu-item>
            <el-menu-item index="4-2">创建比赛</el-menu-item>
          </el-submenu>
          <el-submenu index="5" v-model="menu5">
            <template #title>
              <i class="el-icon-notebook-2"></i>
              <span>课程</span>
            </template>
            <el-menu-item index="5-1">课程列表</el-menu-item>
            <el-menu-item index="5-2">创建课程</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!-- 右侧内容区域 -->
    <div class="content">
      <div class="header">
        <span class="name">{{ name }}</span>
      </div>
      <div class="main">
        <div class="center">
          <h1>欢迎使用Vue3和Element Plus</h1>
        </div>
      </div>
      <div class="footer">
        <span class="version">版本号：1.0.0</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '张三',
      menu1: false,
      menu2: false,
      menu3: false,
      menu4: false,
      menu5: false,
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.menu1 = index.startsWith('1')
      this.menu2 = index.startsWith('2')
      this.menu3 = index.startsWith('3')
      this.menu4 = index.startsWith('4')
      this.menu5 = index.startsWith('5')
    },
  },
}
</script>
